<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EPUB翻译工具 - 翁乐安</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        
        .upload-zone {
            border: 2px dashed #cbd5e1;
            transition: all 0.3s ease;
        }
        
        .upload-zone:hover {
            border-color: #0ea5e9;
            background-color: #f0f9ff;
        }
        
        .upload-zone.dragover {
            border-color: #0ea5e9;
            background-color: #e0f2fe;
        }
        
        .progress-bar {
            transition: width 0.3s ease;
        }
        
        .status-card {
            transition: all 0.3s ease;
        }
        
        .status-card.processing {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center">
                <a href="index.html" class="flex items-center">
                    <img src="./src/assets/WLA-logo.png" alt="Logo" class="h-10">
                </a>
            </div>
            <div class="hidden md:flex space-x-8">
                <a href="index.html" class="text-slate-600 hover:text-sky-500 transition-colors">首页</a>
                <a href="#features" class="text-slate-600 hover:text-sky-500 transition-colors">功能介绍</a>
                <a href="#translator" class="text-slate-600 hover:text-sky-500 transition-colors">开始翻译</a>
            </div>
            <button class="md:hidden text-slate-600">
                <i class="fas fa-bars text-xl"></i>
            </button>
        </div>
    </nav>

    <!-- 页面标题 -->
    <section class="bg-gradient-to-r from-blue-50 to-sky-50 py-16">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">EPUB智能翻译工具</h1>
            <p class="text-xl text-slate-600 mb-8">基于AI技术，快速准确翻译你的EPUB电子书</p>
            <div class="flex justify-center space-x-4">
                <div class="bg-white rounded-lg px-6 py-3 shadow-sm">
                    <i class="fas fa-book text-sky-500 mr-2"></i>
                    支持EPUB格式
                </div>
                <div class="bg-white rounded-lg px-6 py-3 shadow-sm">
                    <i class="fas fa-language text-sky-500 mr-2"></i>
                    多语言支持
                </div>
                <div class="bg-white rounded-lg px-6 py-3 shadow-sm">
                    <i class="fas fa-bolt text-sky-500 mr-2"></i>
                    快速处理
                </div>
            </div>
        </div>
    </section>

    <!-- 功能介绍 -->
    <section id="features" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12">功能特色</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="text-center">
                    <div class="bg-sky-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-upload text-sky-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">简单上传</h3>
                    <p class="text-slate-600">拖拽或点击上传你的EPUB文件，支持批量处理</p>
                </div>
                <div class="text-center">
                    <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-cogs text-green-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">智能翻译</h3>
                    <p class="text-slate-600">基于先进AI模型，保持原文格式和排版</p>
                </div>
                <div class="text-center">
                    <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-download text-purple-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">快速下载</h3>
                    <p class="text-slate-600">翻译完成后立即下载，保持原始质量</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 翻译工具主体 -->
    <section id="translator" class="py-16 bg-slate-50">
        <div class="container mx-auto px-4 max-w-4xl">
            <div class="bg-white rounded-xl shadow-lg p-8">
                <h2 class="text-3xl font-bold text-center mb-8">开始翻译</h2>
                
                <!-- 语言选择 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">源语言</label>
                        <select id="fromLang" class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500">
                            <option value="EN">英语 (English)</option>
                            <option value="CN">中文 (Chinese)</option>
                            <option value="JP">日语 (Japanese)</option>
                            <option value="KR">韩语 (Korean)</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">目标语言</label>
                        <select id="toLang" class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500">
                            <option value="CN">中文 (Chinese)</option>
                            <option value="EN">英语 (English)</option>
                            <option value="JP">日语 (Japanese)</option>
                            <option value="KR">韩语 (Korean)</option>
                        </select>
                    </div>
                </div>

                <!-- 文件上传区域 -->
                <div id="uploadZone" class="upload-zone rounded-xl p-12 text-center mb-8">
                    <div id="uploadContent">
                        <i class="fas fa-cloud-upload-alt text-6xl text-slate-400 mb-4"></i>
                        <h3 class="text-xl font-semibold mb-2">上传EPUB文件</h3>
                        <p class="text-slate-600 mb-4">拖拽文件到此处或点击选择文件</p>
                        <button id="selectFileBtn" class="bg-sky-500 hover:bg-sky-600 text-white px-6 py-3 rounded-lg transition-colors">
                            选择文件
                        </button>
                        <input type="file" id="fileInput" accept=".epub" multiple class="hidden">
                    </div>
                </div>

                <!-- 文件列表 -->
                <div id="fileList" class="space-y-4 mb-8 hidden"></div>

                <!-- 翻译控制 -->
                <div class="text-center">
                    <button id="startTranslation" class="bg-green-500 hover:bg-green-600 text-white px-8 py-3 rounded-lg transition-colors disabled:bg-slate-400 disabled:cursor-not-allowed" disabled>
                        <i class="fas fa-play mr-2"></i>
                        开始翻译
                    </button>
                </div>

                <!-- 进度显示 -->
                <div id="progressSection" class="mt-8 hidden">
                    <div class="mb-4">
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-sm font-medium text-slate-700">翻译进度</span>
                            <span id="progressText" class="text-sm text-slate-500">0%</span>
                        </div>
                        <div class="w-full bg-slate-200 rounded-full h-2">
                            <div id="progressBar" class="bg-sky-500 h-2 rounded-full progress-bar" style="width: 0%"></div>
                        </div>
                    </div>
                    <div id="currentFile" class="text-sm text-slate-600">准备开始...</div>
                </div>

                <!-- 结果显示 -->
                <div id="resultsSection" class="mt-8 hidden">
                    <h3 class="text-xl font-semibold mb-4">翻译完成</h3>
                    <div id="downloadList" class="space-y-3"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- 使用说明 -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12">使用说明</h2>
            <div class="max-w-3xl mx-auto">
                <div class="space-y-6">
                    <div class="flex items-start">
                        <div class="bg-sky-100 w-8 h-8 rounded-full flex items-center justify-center mr-4 mt-1">
                            <span class="text-sky-600 font-bold">1</span>
                        </div>
                        <div>
                            <h3 class="font-semibold mb-1">选择语言</h3>
                            <p class="text-slate-600">在上方选择源语言和目标语言</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="bg-sky-100 w-8 h-8 rounded-full flex items-center justify-center mr-4 mt-1">
                            <span class="text-sky-600 font-bold">2</span>
                        </div>
                        <div>
                            <h3 class="font-semibold mb-1">上传文件</h3>
                            <p class="text-slate-600">支持单个或多个EPUB文件同时上传</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="bg-sky-100 w-8 h-8 rounded-full flex items-center justify-center mr-4 mt-1">
                            <span class="text-sky-600 font-bold">3</span>
                        </div>
                        <div>
                            <h3 class="font-semibold mb-1">开始翻译</h3>
                            <p class="text-slate-600">点击"开始翻译"按钮，系统将自动处理你的文件</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="bg-sky-100 w-8 h-8 rounded-full flex items-center justify-center mr-4 mt-1">
                            <span class="text-sky-600 font-bold">4</span>
                        </div>
                        <div>
                            <h3 class="font-semibold mb-1">下载结果</h3>
                            <p class="text-slate-600">翻译完成后，点击下载按钮获取翻译好的EPUB文件</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-slate-800 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <p class="text-slate-400">EPUB翻译工具 - 让阅读无国界</p>
                </div>
                <div class="text-sm text-slate-400">
                    <a href="index.html" class="text-sky-400 hover:text-sky-300">返回首页</a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        class EPUBTranslator {
            constructor() {
                this.selectedFiles = [];
                this.isTranslating = false;
                this.init();
            }

            init() {
                this.setupEventListeners();
            }

            setupEventListeners() {
                const uploadZone = document.getElementById('uploadZone');
                const fileInput = document.getElementById('fileInput');
                const selectFileBtn = document.getElementById('selectFileBtn');
                const startTranslationBtn = document.getElementById('startTranslation');

                // 文件选择
                selectFileBtn.addEventListener('click', () => fileInput.click());
                fileInput.addEventListener('change', (e) => this.handleFileSelect(e.target.files));

                // 拖拽上传
                uploadZone.addEventListener('dragover', (e) => {
                    e.preventDefault();
                    uploadZone.classList.add('dragover');
                });

                uploadZone.addEventListener('dragleave', () => {
                    uploadZone.classList.remove('dragover');
                });

                uploadZone.addEventListener('drop', (e) => {
                    e.preventDefault();
                    uploadZone.classList.remove('dragover');
                    this.handleFileSelect(e.dataTransfer.files);
                });

                // 开始翻译
                startTranslationBtn.addEventListener('click', () => this.startTranslation());
            }

            handleFileSelect(files) {
                const epubFiles = Array.from(files).filter(file => file.name.endsWith('.epub'));
                
                if (epubFiles.length === 0) {
                    alert('请选择EPUB格式的文件');
                    return;
                }

                this.selectedFiles = epubFiles;
                this.displayFileList();
                document.getElementById('startTranslation').disabled = false;
            }

            displayFileList() {
                const fileList = document.getElementById('fileList');
                fileList.innerHTML = '';
                fileList.classList.remove('hidden');

                this.selectedFiles.forEach((file, index) => {
                    const fileItem = document.createElement('div');
                    fileItem.className = 'bg-slate-50 rounded-lg p-4 flex items-center justify-between';
                    fileItem.innerHTML = `
                        <div class="flex items-center">
                            <i class="fas fa-book text-sky-500 mr-3"></i>
                            <div>
                                <div class="font-medium">${file.name}</div>
                                <div class="text-sm text-slate-500">${(file.size / 1024 / 1024).toFixed(2)} MB</div>
                            </div>
                        </div>
                        <button onclick="epubTranslator.removeFile(${index})" class="text-red-500 hover:text-red-700">
                            <i class="fas fa-times"></i>
                        </button>
                    `;
                    fileList.appendChild(fileItem);
                });
            }

            removeFile(index) {
                this.selectedFiles.splice(index, 1);
                this.displayFileList();
                
                if (this.selectedFiles.length === 0) {
                    document.getElementById('fileList').classList.add('hidden');
                    document.getElementById('startTranslation').disabled = true;
                }
            }

            async startTranslation() {
                if (this.isTranslating || this.selectedFiles.length === 0) return;

                this.isTranslating = true;
                const startBtn = document.getElementById('startTranslation');
                const progressSection = document.getElementById('progressSection');
                const resultsSection = document.getElementById('resultsSection');

                startBtn.disabled = true;
                startBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>翻译中...';
                progressSection.classList.remove('hidden');
                resultsSection.classList.add('hidden');

                try {
                    const fromLang = document.getElementById('fromLang').value;
                    const toLang = document.getElementById('toLang').value;

                    for (let i = 0; i < this.selectedFiles.length; i++) {
                        const file = this.selectedFiles[i];
                        const progress = Math.round(((i + 1) / this.selectedFiles.length) * 100);
                        
                        this.updateProgress(progress, `正在翻译: ${file.name}`);
                        
                        // 这里应该调用后端API
                        await this.translateFile(file, fromLang, toLang);
                        
                        // 模拟处理时间
                        await new Promise(resolve => setTimeout(resolve, 2000));
                    }

                    this.showResults();
                } catch (error) {
                    console.error('翻译过程中发生错误:', error);
                    alert('翻译过程中发生错误，请重试');
                } finally {
                    this.isTranslating = false;
                    startBtn.disabled = false;
                    startBtn.innerHTML = '<i class="fas fa-play mr-2"></i>开始翻译';
                }
            }

            updateProgress(percent, message) {
                document.getElementById('progressBar').style.width = `${percent}%`;
                document.getElementById('progressText').textContent = `${percent}%`;
                document.getElementById('currentFile').textContent = message;
            }

            async translateFile(file, fromLang, toLang) {
                console.log(`开始翻译文件: ${file.name} 从 ${fromLang} 到 ${toLang}`);
                
                try {
                    const formData = new FormData();
                    formData.append('file', file);
                    formData.append('fromLang', fromLang);
                    formData.append('toLang', toLang);

                    // const response = await fetch('http://localhost:5000/api/translate', {
                    //     method: 'POST',
                    //     body: formData
                    // });

                    const response = await fetch('http://47.121.216.193:5000/api/translate', {
                        method: 'POST',
                        body: formData
                    });

                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }

                    const result = await response.json();
                    console.log('翻译结果:', result);
                    
                    // 存储下载信息
                    // file.downloadUrl = `http://localhost:5000${result.download_url}`;
                    file.downloadUrl = `http://47.121.216.193:5000${result.download_url}`;
                    file.translatedName = result.output_filename;
                    
                    return result;
                } catch (error) {
                    console.error('翻译文件时发生错误:', error);
                    throw error;
                }
            }

            showResults() {
                const resultsSection = document.getElementById('resultsSection');
                const downloadList = document.getElementById('downloadList');
                
                resultsSection.classList.remove('hidden');
                downloadList.innerHTML = '';

                this.selectedFiles.forEach((file, index) => {
                    const resultItem = document.createElement('div');
                    resultItem.className = 'bg-green-50 rounded-lg p-4 flex items-center justify-between';
                    
                    const downloadUrl = file.downloadUrl || '#';
                    const translatedName = file.translatedName || file.name.replace('.epub', '_translated.epub');
                    
                    resultItem.innerHTML = `
                        <div class="flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-3"></i>
                            <div>
                                <div class="font-medium">${translatedName}</div>
                                <div class="text-sm text-green-600">翻译完成</div>
                            </div>
                        </div>
                        <a href="${downloadUrl}" download class="bg-sky-500 hover:bg-sky-600 text-white px-4 py-2 rounded-lg transition-colors inline-block">
                            <i class="fas fa-download mr-1"></i>
                            下载
                        </a>
                    `;
                    downloadList.appendChild(resultItem);
                });
            }
        }

        // 初始化翻译器
        const epubTranslator = new EPUBTranslator();

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth' });
                }
            });
        });
    </script>
</body>
</html>